//引入echarts文件
import * as echarts from '../../ec-canvas/echarts';
var apikey = "Glc2k6jtlwxpTbYdrbc7cZM86V8="//自己的云平台产品APIKEY

function line_set(chart,xdata,tdata,hdata,ldata) {
  var option = {
    title: {
      text: '采集信息折线图',
      left: 'center'
    },
    legend: {
      data: ['温度', '湿度', '光照'],
      top: 30,
      left: 'center',
      backgroundColor: 'pink',
      textStyle: {
        color: 'black'
      }
    },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      name:'日期',
      axisLabel: { 
        rotate:70
     } ,
      type: 'category',
      boundaryGap: false,
      data: xdata
    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitNumber:3,
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    series: [{
      name: '温度',
      type: 'bar',
      smooth: true,
      data: tdata,
      areaStyle: {
        //覆盖区域的渐变色
        normal: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgb(68,114,196)", // 0%处(顶部)的颜色
              },
              {
                offset: 1,
                color: "#FFFFFF", // 100%处(底部)的颜色
              },
            ],
          },
        },
      },
    }, {
      name: '湿度',
      type: 'line',
      smooth: true,
      data: hdata,
      areaStyle: {
        //覆盖区域的渐变色
        normal: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgb(146,208,80)", // 0% 处的颜色,顶部
              },
              {
                offset: 1,
                color: "#FFFFFF", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    }, {
      name: '光照',
      type: 'scatter',
      smooth: true,
      data: ldata,
      areaStyle: {
        //覆盖区域的渐变色
        normal: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#F9D5A8", // 0% 处的颜色,顶部
              },
              {
                offset: 1,
                color: "#FFFFFF", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    }]
  };
  chart.setOption(option);
}
Page({
  /**
   * 页面的初始数据
   */
  data: {
    ec: {
    },
  },

//初始化第一个图表
  init_chart: function (xdata, tdata,hdata,ldata) {        
    this.oneComponent.init((canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr 
        });
        line_set(chart, xdata, tdata,hdata,ldata)
        this.chart = chart;
        return chart;
    });
},
getOption: function () {
  var that = this;
  wx.request({
      url: 'https://api.heclouds.com/devices/1097000193/datapoints', //自己的设备号  
      method: 'GET',
      header: {
          "api-key": apikey    
      },
      data:{
        limit: 15
      },
      success:  (res)=> {
        console.log("获取成功",res);
        that.setData({      
          //将接口返回的数据data赋值给data
          data:res.data  
        })
        var i
        var Temperature=[];
        var Humidity=[];
        var Light=[];
        var date=[];
        for (i = 0; i <15; i++) {
            Temperature[i]=res.data.data.datastreams[0].datapoints[i].value;
            Humidity[i]=res.data.data.datastreams[5].datapoints[i].value;
            Light[i]=res.data.data.datastreams[3].datapoints[i].value;
            date[i]=res.data.data.datastreams[3].datapoints[i].at;
         }
        that.init_chart(date,Temperature,Humidity,Light)           
      },   
  })
},
/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    that.oneComponent = that.selectComponent('#myechart');
    that.getOption();
    that.setData({                    //每隔5s刷新一次
      timer: setInterval(function () {
        that.getOption();
    }, 15000)
    })
  }
})

